<template>
    <div class="layout">
        <!-- 顶部标签 -->
        <inner-header class="head">
            <template v-slot:head-title>
                <span>详情</span>
            </template>
        </inner-header>

        <!-- 主要内容 -->
        <div class="main">
            <div class="info">
                <div class="pic">
                    <img v-bind:src="info[0].src" alt="图片">
                </div>
                <div class="txt">
                    <div>{{info[0].name}}</div>
                    <ul class="tap">
                        <li v-for="(item, index) in info[0].tab" :key="index"
                            :style="{'background-color':tabColor[index]}">{{item}}</li>
                    </ul>
                    <span v-if="info[0].dis">正在打折</span>
                    <button :class="isLike?'active':''" @click="mylike">{{isLike?'已关注':'+关注'}}</button>
                </div>
            </div>

            <div class="price">
                <div class="price-top">
                    <div>国家/地区</div>
                    <div>原价</div>
                </div>
                <div class="list">
                    <ul class="region-list">
                        <li v-for="(item, index) in region" :key="index">{{item}}</li>
                    </ul>
                    <ul class="price-list">
                        <li v-for="(item, index) in info[0].price" :key="index">{{item}} CNY</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <app-nav></app-nav>
    </div>
</template>

<script>
import innerHeader from '@/components/inner-header.vue'
import appNav from '@/components/app-nav.vue'
import Brige from '@/assets/data/brige.js'
import { gameArray } from '@/assets/data/game.js'
export default ({
    name: 'gamesDetail',
    components: {
        innerHeader,
        appNav
    },
    data() {
        return {
            arr: gameArray, // 游戏数据
            gameId: "",
            info: [], // 当前页面的游戏数据
            res: [], // 收藏的游戏数据
            isLike: false, // 判断是否点击关注
            region: [
                "阿根廷",
                "土耳其",
                "巴西",
                "哥伦比亚",
                "智利",
                "美国",
                "加拿大",
                "新加坡",
                "中国香港",
                "日本"
            ],
            tabColor: [
                "#008000",
                "#FF8C00",
                "#800080",
                "#1D8B73",
                "#8B0000",
                "#FFD700",
            ]
        }
    },
    methods: {
        mylike() {
            // 关注按钮取反
            this.isLike = !this.isLike;
            if (this.isLike) {
                // 点击关注并设置缓存
                localStorage.setItem(this.gameId, this.isLike)
                localStorage.setItem('id'+this.gameId, this.gameId)
                // 将收藏的数据添加到收藏数组
                // this.info.forEach(item => {
                //     this.res.unshift(item)
                // });
            } else {
                // 取消关注并删除缓存
                localStorage.removeItem(this.gameId)
                localStorage.removeItem('id'+this.gameId)
                // 移除取消收藏的数据
                // this.res.shift();
            }
            // Brige.$emit('LikeData', this.res);
        }
    },
    created() {
        // 接收路由传值
        let id = this.$route.query.id
        this.arr.forEach((item, index) => {
            // 添加已收藏的数据到收藏的数据数组
            if (item.like == true) {
                this.res.push(item);
            }
            // 添加对应数据到当前页面
            if (index == id) {
                this.info.push(item);
                this.gameId = index;
            }
        })
        // 将收藏的缓存数据赋给判断是否关注的布尔值
        if (localStorage.getItem(this.gameId)) {
            this.info[0].like = localStorage.getItem(this.gameId);
        }
        // 将已关注的数据赋给判断是否关注的布尔值
        this.isLike = this.info[0].like;
    }
})
</script>

<style lang="scss" scoped>
.layout {
    width: 100%;
    background-color: #171717;
    .main {
        width: 100%;
        margin-top: 80px;
        box-sizing: border-box;
        overflow: hidden;
        .info {
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            background-color: #2E2E2E;
            .pic {
                width: 100px;
                height: 150px;
                border-radius: 5px;
                flex-shrink: 0;
                overflow: hidden;
                img {
                    width: 100%;
                }
            }
            .txt {
                flex-grow: 1;
                margin-left: 15px;
                position: relative;
                overflow: hidden;
                div {
                    font-size: 20px;
                    text-overflow: ellipsis;
                    color: white;
                }
                span {
                    font-size: 15px;
                    color: red;
                    position: absolute;
                    bottom: 10px;
                }
                >ul {
                    width: 75%;
                    margin-top: 15px;
                    overflow: hidden;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: start;
                    align-items: flex-start;
                    li {
                        height: 20px;
                        font-size: 12px;
                        margin-right: 5px;
                        margin-bottom: 8px;
                        padding: 2px 5px;
                        border-radius: 2px;
                        box-sizing: border-box;
                        flex-shrink: 0;
                        color: white;
                        background-color: #008000;
                    }
                }
                button {
                    width: 60px;
                    height: 35px;
                    color: white;
                    background-color: #F7B500;
                    border-radius: 5px;
                    right: 10px;
                    bottom: 10px;
                    position: absolute;
                    cursor: pointer;
                    &.active {
                        background-color: #008000;
                    }
                }
            }
        }
        .price {
            margin-top: 15px;
            box-sizing: border-box;
            background-color: #2E2E2E;
            .price-top {
                height: 80px;
                display: flex;
                padding: 0 15px;
                border-bottom: 1px solid #171717;
                div {
                    height: 80px;
                    line-height: 80px;
                    font-size: 20px;
                    color: white;
                    &:first-child {
                        width: 70%;
                    }
                }
            }
            .list {
                width: 100%;
                padding: 0 15px;
                margin-bottom: 80px;
                box-sizing: border-box;
                overflow: hidden;
                display: flex;
                .region-list {
                    width: 70%;
                    li {
                        height: 60px;
                        line-height: 60px;
                        color: white;
                        border-bottom: 1px solid #171717;
                    }
                }
                .price-list {
                    li {
                        height: 60px;
                        line-height: 60px;
                        color: white;
                        border-bottom: 1px solid #171717;
                    }
                }
            }
        }
    }
}
</style>